<template>
  <div class="container">
    <div class="header">
      <span>举报自习室</span>
    </div>
    <p>请选择要举报的类型</p>
    <div class="main">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <p>举报内容</p>
    <div class="content"></div>
    <p>图片证据</p>
    <div class="img">+</div>
    <div class="submit" @click="addHandle">提交</div>
    <div class="tanchu" v-show="show">提交成功,我们会在24小时内为您处理</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: "",
    };
  },
  methods: {
    addHandle() {
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, 1000);
    },
  },
};
</scriptA>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.header {
  width: 750px;
  height: 44px;
  background-color: rgba(239, 239, 239, 100);
  position: relative;
}
span {
  font-size: 32px;
  margin-left: 296px;
}
p {
  margin-left: 33px;
  margin-top: 60px;
  width: 308px;
  height: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 28px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.main {
  width: 750px;
  height: 380px;
}
.box {
  width: 240px;
  height: 68px;
  float: left;
  margin: 40px 50px;
  line-height: 20px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
}
.content {
  margin-left: 33px;
  margin-top: 40px;
  width: 302px;
  height: 100px;
  line-height: 20px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  width: 604px;
  height: 200px;
  line-height: 20px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
}
.img {
  margin-left: 33px;
  margin-top: 20px;
  width: 230px;
  height: 200px;
  line-height: 200px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
}
.submit {
  margin-left: 150px;
  margin-top: 50px;
  width: 400px;
  height: 98px;
  line-height: 98px;
  border-radius: 20px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 100);
}
.tanchu {
  margin-left: 50px;
  width: 600px;
  height: 98px;
  line-height: 98px;
  border-radius: 20px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 100);
}
</style>
